<template>
	<i-drawer v-model="showModal" title="确认删除渠道吗？" confirm_title="删除" @confirm="confirm"></i-drawer>
	<view class="addChannel">
		<view class="form">
			<i-formItem title="渠道名称" :require="true">
				<input placeholder-class="placeholder-class" v-model="formData.channelName" type="text" placeholder="请输入渠道名称">
			</i-formItem>
			<view class="no_item" v-if="!formData.channelName && !isOnceCheck">请填写此项</view>
			<i-formItem title="排序">
				<input placeholder-class="placeholder-class" v-model="formData.sortNum" type="number" placeholder="排序值越小，排名越靠前">
			</i-formItem>
			<view style="height: 64rpx;"></view>
			<i-buttons radius="4" padding="18rpx 0" size="32" color="#fff" bgColor="#FB652E" @click="add">保存</i-buttons>
			<view style="height: 32rpx;"></view>
			<i-buttons v-if="formData.id" radius="4" padding="18rpx 0" size="32"
				@click="showModal = true">删除</i-buttons>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app'
	import {
		computed,
		ref,
		reactive
	} from 'vue';
	import useStore from '../../stores/index'
	import { navTo, showTost, checkForm } from '../../utils/common';
	import { createOrUpdate, sourceChannelDelete } from '../../api/business';
	const store = useStore()

	const isOnceCheck = ref(true)
	const showModal = ref(false)


	const formData = reactive<{ channelName : string, sortNum ?: number, id ?: string }>({
		"channelName": "",
		"sortNum": 0
	})

	const add = async () => {
		isOnceCheck.value = false
		const data = checkForm(formData, ['sortNum', 'id'], {}, false, false)
	    if (formData.sortNum > 999) {
			showTost('排序最大值不超过999')
			return
		}
		if (data) {
			return
		}
		await createOrUpdate(formData)
		showTost(formData.id ? "编辑成功" : "添加成功", () => { navTo('', 'navigateBack') })

	}

	const confirm = async () => {
		await sourceChannelDelete({id: formData.id})
		showTost('删除成功！', () => { navTo('', 'navigateBack') })
	}

	onLoad((option) => {
		if (option.id) {
			formData.id = option.id
			formData.channelName = option.channelName
			formData.sortNum = Number(option.sortNum)
		}
	})
	onReady(() => {
		uni.setNavigationBarTitle({
			title: formData.id ? "编辑渠道" : "添加渠道"
		})
	})
</script>

<style lang="scss" scoped>
	.addChannel {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #fff;

		.form {
			width: calc(100% - 64rpx);
			margin: 0 auto;
			@include flexC;

			.vno {
				@include dfont;
				width: 75%;
			}

			input {
				width: 80%;
			}
		}

	}

	.placeholders {
		@include dfont;
		color: #a0a0a0;
	}

	.car_number {
		height: 900rpx;
		width: calc(100% - 64rpx);
		margin: 0 auto;

		.car_title {
			@include flexRS;
			padding-bottom: 48rpx;

			.image {
				width: 48rpx;
				height: 48rpx;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

	}

	.no_item {
		width: 100%;
		border-top: 1rpx solid #FF453A;
		color: #FF453A;
		font-size: 26rpx;
	}

	.prop_title {
		@include flexRC;
		padding: 48rpx 0;
		@include dfont(32rpx);
	}
</style>